<template>

    <div id="web_bg" style="background-image: url(http://localhost:8181/assets/system/bg.jpg);">
        <el-row :gutter="10" style="margin-top: 180px">
            <el-col :span="8">&nbsp;</el-col>
            <el-col :span="8">
                <el-card class="box-card" style="background: #003a74">
                    <div slot="header" class="clearfix">
                        <span style="font-size: 26px;color: #42b983;margin: 0 auto;">小新商城后台管理系统</span>

                    </div>
                    <div>
                        <el-form :model="login" :rules="rules" ref="login" label-width="100px" label-position="top">
                            <el-form-item label="登录账号" prop="name" class="paddingZero">
                                <el-input v-model="login.name"></el-input>
                            </el-form-item>
                            <el-form-item label="登录密码" prop="pwd" class="paddingZero">
                                <el-input @keyup.enter.native="submitForm('login')" type="password" v-model="login.pwd"
                                    show-password></el-input>
                            </el-form-item>

                            <div style="margin-top: 40px;text-align: center;">
                                <el-button type="primary" @click="submitForm('login')"
                                    style="width: 100%;">立即登录</el-button>
                            </div>
                            <div style="margin: 15px 0;text-align: center;">
                                <el-button @click="resetForm('login')" style="width: 100%;">重置</el-button>
                            </div>
                            <div>
                                <el-button style="float: right; padding: 0;margin-top: -4px;" type="text"
                                    @click="toUser">用户登录 ></el-button>
                            </div>
                        </el-form>
                    </div>
                </el-card>

            </el-col>
        </el-row>

    </div>
</template>

<script>
import { mapMutations } from "vuex";
    import md5 from 'js-md5';

    export default {
        name: "Admin_Login",
        data() {
            return {
                val: false,
                login: {
                    name: '',
                    pwd: '',
                },
                rules: {
                    name: [{ required: true, message: '账号不能为空'},
                        { type: 'string', message: '长度不能超过30位', trigger: 'blur', max: 30 }
                    ],
                    pwd: [
                        { required: true, message: '输入密码', trigger: 'blur' },
                        { type: 'string', message: '密码长度应保持在6-16之间', trigger: 'blur', min: 6,max:16 }
                    ]
                }
            };
        },
        methods: {
            ...mapMutations(['adminLogin']),
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let salt = "1a2b3c4d";
                        let str =
                            "" +
                            salt.charAt(0) +
                            salt.charAt(2) +
                            this.login.pwd +
                            salt.charAt(5) +
                            salt.charAt(4);
                        // console.log(str);
                        //请求后端登录接口
                        this.axios({
                            method: "get",
                            url: "/admin/login",
                            params: {
                                name: this.login.name,
                                pwd: md5(str),
                            }
                        }).then(resp => {
                            //获取后端返回数据
                            let state = resp.data.status;
                            //打印token
                            console.log(resp.data.token);
                            //判断是否登录成功
                            if (state === "success") {
                                // 加入到全局变量中
                                this.adminLogin({
                                    myAdmin: resp.data.admin,
                                    Authorization: resp.data.token,
                                    signTime: new Date().getTime()
                                });
                                this.$message.success("登陆成功");
                                this.$router.push('/admin');
                            } else {
                                this.$message.error("用户名或密码错误");
                            }

                        });
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            toUser() {
                this.$router.push('/login');
            }
        }
    }
</script>

<style>
  #web_bg{
    position:fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    min-width: 1000px;
    z-index:-10;
    zoom: 1;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;
  }
  .clearfix{
    width: 100%;
    text-align: center;
  }
  .el-form--label-top .el-form-item__label{
    padding-bottom: 0 !important;
    color: white;
  }
  .el-form-item{
    margin: 0;
  }
</style>
